<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .container{
            width: 1000px;
            border-radius: 10px;
            border: 1px solid red;
            margin: 50px auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form class="form-horizontal">
            <a class="btn btn-default" href="#" role="button">Link</a>
            <button class="btn btn-default" type="submit">Button</button>
            <input class="btn btn-default" type="button" value="Input">
            <input class="btn btn-default" type="submit" value="Submit">

        </form>
    </div>
    <div class="container">
        <form class="form-horizontal">
            <button class="btn btn-danger active" >危险</button>
            <button class="btn btn-warning ">警告</button>
            <button class="btn btn-success" disabled>成功</button>
            <button class="btn btn-default">默认状态</button>

        </form>
    </div>
    <div class="container">
        <form class="form-horizontal">
            <button class="btn  btn-primary btn-lg">大号按钮</button>
            <button class="btn btn-sm ">小号按钮</button>
            <button class="btn btn-xs">特小号按钮</button>
        </form>
    </div>
    <script>/*
        1.(a button input )元素添加按钮类  可以使用bootstrap
        2.虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
            如果a做为按钮使用 必须要加 role="button"
        3.按钮的尺寸
            btn-lg btn-sm btn-xs
        4.active 按钮激活状态
        5.通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。 css里写disabled
                为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
        */
    </script>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>